@using Humanizer
@using Humanizer.Localisation
@using StardewModdingAPI.Web.Framework
@model StardewModdingAPI.Web.ViewModels.ModListModel
@{
    ViewData["Title"] = "Mod compatibility";

    TimeSpan staleAge = DateTimeOffset.UtcNow - Model.LastUpdated;
}
@section Head {
    @* jQuery *@
    <script src="@Url.ContentWithCacheBust("~/Content/lib/jquery/dist/jquery.min.js")"></script>

    @* jQuery tablesorter *@
    <script src="@Url.ContentWithCacheBust("~/Content/lib/tablesorter/dist/js/jquery.tablesorter.min.js")"></script>

    @* Vue *@
    <script src="@Url.ContentWithCacheBust("~/Content/lib/vue/dist/vue.min.js")"></script>

    @* page CSS/JS *@
    <link rel="stylesheet" href="@Url.ContentWithCacheBust("~/Content/css/mods.css")" />
    <script src="@Url.ContentWithCacheBust("~/Content/js/mods.js")"></script>
    <script>
        $(function() {
            smapi.modList({
                fetchUri: @this.ForJson(this.Model.FetchUri),
                fetchedData: @this.ForJson(this.Model.Mods)
            });
        });
    </script>
}

@if (!Model.HasData)
{
    <div class="error">↻ The mod data hasn't been fetched yet; please try again in a few minutes.</div>
}
else
{
    @* non-JavaScript error *@
    <noscript>
        <div class="banner error">
            <strong>This page requires JavaScript.</strong><br />
            This pages uses JavaScript to render the compatibility list. To view the list, please enable JavaScript or <a href="https://github.com/Pathoschild/SmapiCompatibilityList">view the raw data</a>.
        </div>
    </noscript>

    @if (Model.IsStale)
    {
        <div class="error">Showing data from @staleAge.Humanize(maxUnit: TimeUnit.Hour, minUnit: TimeUnit.Minute) ago. (Couldn't fetch newer data; the GitHub API may be offline.)</div>
    }

    <div id="intro">
        <p>This page shows all known SMAPI mods and (incompatible) content packs, whether they work with the latest versions of Stardew Valley and SMAPI, and how to fix them if not. If a mod doesn't work after following the instructions below, check <a href="https://stardewvalleywiki.com/Modding:Player_Guide/Troubleshooting">the troubleshooting guide</a> or <a href="https://stardewvalleywiki.com/Modding:Help">ask for help</a>.</p>

        <p>The list is updated regularly (<a href="https://github.com/Pathoschild/SmapiCompatibilityList#readme">you can help update it</a>!). It doesn't include XNB mods (see <a href="https://stardewvalleywiki.com/Modding:Using_XNB_mods"><em>using XNB mods</em> on the wiki</a> instead) or compatible content packs.</p>
    </div>

    <div v-cloak id="app">
        @* loading indicator *@
        <div v-if="false" class="loading-indicator"><div></div><div></div><div></div><div></div></div>

        <div id="options">
            <div>
                <label for="search-box">Search: </label>
                <input type="text" id="search-box" v-model="search" v-on:input="applyFilters" />
            </div>
            <div id="filter-area">
                <input type="checkbox" id="show-advanced" v-model="showAdvanced" />
                <label for="show-advanced">show advanced info and options</label>
                <div id="filters" v-show="showAdvanced">
                    <div v-for="(filterGroup, key) in filters">
                        {{filterGroup.label}}: <span v-for="filter in filterGroup.value" v-bind:class="{ active: filter.value }"><input type="checkbox" v-bind:id="filter.id" v-model="filter.value" v-on:change="applyFilters" /> <label v-bind:for="filter.id">{{filter.label}}</label></span>
                    </div>
                </div>
            </div>
        </div>
        <div id="mod-count" v-show="showAdvanced">
            <div v-if="visibleMainStats.total > 0">
                {{visibleMainStats.total}} mods shown ({{visibleMainStats.percentCompatible}}% compatible or have a workaround, {{visibleMainStats.percentBroken}}% broken, {{visibleMainStats.percentObsolete}}% obsolete).
            </div>
            <span v-else>No matching mods found.</span>
        </div>
        <table class="wikitable" id="mod-list">
            <thead>
                <tr>
                    <th>mod name</th>
                    <th>links</th>
                    <th>author</th>
                    <th>compatibility</th>
                    <th v-show="showAdvanced">broke in</th>
                    <th v-show="showAdvanced">code</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="mod in mods" :key="mod.Slug" v-bind:id="mod.Slug" v-bind:data-status="mod.Compatibility.Status" v-show="mod.Visible">
                    <td>
                        {{mod.Name}}
                        <small class="mod-alt-names" v-if="mod.AlternateNames">(aka {{mod.AlternateNames}})</small>
                    </td>
                    <td class="mod-page-links">
                        <span v-for="(link, i) in mod.ModPages">
                            <a v-bind:href="link.Url">{{link.Text}}</a>{{i &lt; mod.ModPages.length - 1 ? ', ' : ''}}
                        </span>
                    </td>
                    <td>
                        {{mod.Author}}
                        <small class="mod-alt-authors" v-if="mod.AlternateAuthors">(aka {{mod.AlternateAuthors}})</small>
                    </td>
                    <td>
                        <div v-html="mod.Compatibility.Summary"></div>
                        <div v-if="mod.Warnings" v-for="(warning, i) in mod.Warnings">⚠ {{warning}}</div>
                    </td>
                    <td class="mod-broke-in" v-html="mod.Compatibility.BrokeIn" v-show="showAdvanced"></td>
                    <td v-show="showAdvanced">
                        <span v-if="mod.SourceUrl">
                            <a v-bind:href="mod.SourceUrl">source</a>
                            <span v-if="mod.GitHubRepo">
                                @* see https://shields.io/category/license *@
                                (<img v-bind:src="'https://img.shields.io/github/license/' + mod.GitHubRepo + '?style=flat-square.png&label='" class="license-badge" alt="source" />)
                            </span>
                        </span>
                        <span v-else class="mod-closed-source">no source</span>
                    </td>
                    <td>
                        <small>
                            <a v-bind:href="'#' + mod.Slug">#</a>
                            <span v-show="showAdvanced">
                                <abbr v-bind:title="mod.DevNote" v-if="mod.DevNote">[dev note]</abbr>
                            </span>
                        </small>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
}
